<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>黑名单管理</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        .layui-table td, .layui-table th {
            text-align: center;
        }
        .search-area {
            margin-bottom: 10px;
        }
        .status-enable {
            color: green;
        }
        .status-disable {
            color: red;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">黑名单管理</div>
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="search-area">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="searchUsername" placeholder="请输入用户名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                    </div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="layui-btn-container" style="margin-bottom: 10px;">
                <button class="layui-btn layui-btn-sm" id="refreshBtn">
                    <i class="layui-icon layui-icon-refresh"></i>刷新
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="generateBtn">
                    <i class="layui-icon layui-icon-add-1"></i>生成测试数据
                </button>
            </div>
            
            <!-- 黑名单列表表格 -->
            <table id="blacklistTable" lay-filter="blacklistFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 渲染黑名单表格
        var blacklistTable = table.render({
            elem: '#blacklistTable',
            url: '/blacklist/list',
            method: 'get',
            page: true,
            limit: 5,
            limits: [5,10, 20, 50],
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'},
                {field: 'userId', title: '用户ID', width: 100, align: 'center'},
                {field: 'reason', title: '拉黑原因', width: 200},
                {field: 'createTime', title: '拉黑时间', width: 200, sort: true, align: 'center', templet: function(d) {
                    return d.createTime ? new Date(d.createTime).toLocaleString() : '';
                }},
                {field: 'operator', title: '操作人', width: 150},
                {title: '操作', align: 'center', toolbar: '#rowTools', width: 150}
            ]],
            parseData: function(res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.count,
                    data: res.data.records
                };
            }
        });
        
        // 监听工具栏事件
        table.on('tool(blacklistFilter)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            
            if (layEvent === 'remove') {
                // 移除黑名单
                layer.confirm('确定要将该用户从黑名单中移除吗？', function(index) {
                    $.ajax({
                        url: '/blacklist/delete',
                        method: 'DELETE',
                        data: {
                            id: data.id
                        },
                        success: function(res) {
                            if (res.code === 200) {
                                layer.msg('移除成功');
                                table.reload('blacklistTable');
                            } else {
                                layer.msg(res.msg || '移除失败');
                            }
                        },
                        error: function() {
                            layer.msg('请求失败');
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'details') {
                // 查看用户详情
                showUserDetails(data.userId);
            }
        });
        
        // 搜索按钮点击事件
        $('#searchBtn').click(function() {
            var username = $('#searchUsername').val();
            
            table.reload('blacklistTable', {
                where: {
                    username: username
                },
                page: {
                    curr: 1
                }
            });
        });
        
        // 重置按钮点击事件
        $('#resetBtn').click(function() {
            $('#searchUsername').val('');
            table.reload('blacklistTable', {
                where: {},
                page: {
                    curr: 1
                }
            });
        });
        
        // 刷新按钮点击事件
        $('#refreshBtn').click(function() {
            table.reload('blacklistTable');
        });
        
        // 生成测试数据按钮点击事件
        $('#generateBtn').click(function() {
            layer.prompt({
                formType: 0,
                value: '10',
                title: '请输入要生成的黑名单数据数量',
                area: ['300px', '100px']
            }, function(value, index, elem) {
                var count = parseInt(value);
                if (isNaN(count) || count <= 0) {
                    layer.msg('请输入有效的数字');
                    return;
                }
                
                layer.confirm('确定要生成' + count + '条黑名单测试数据吗？', function(confirmIndex) {
                    $.ajax({
                        url: '/blacklist/generate',
                        method: 'POST',
                        data: {
                            count: count
                        },
                        success: function(res) {
                            if (res.code === 200) {
                                layer.msg(res.msg || '生成成功');
                                table.reload('blacklistTable');
                            } else {
                                layer.msg(res.msg || '生成失败');
                            }
                        },
                        error: function() {
                            layer.msg('请求失败');
                        }
                    });
                    layer.close(confirmIndex);
                });
                layer.close(index);
            });
        });
        
        // 显示用户详情
        function showUserDetails(userId) {
            $.ajax({
                url: '/user/info',
                method: 'GET',
                data: {
                    id: userId
                },
                success: function(res) {
                    if (res.code === 0) {  // 根据您提供的数据结构，code为0表示成功
                        var userData = res.data;
                        var statusText = userData.status === 1 ? '正常' : '禁用';
                        var sexText = userData.sex || '未知';
                        
                        // 格式化日期
                        var birthday = '';
                        if (userData.birthday) {
                            try {
                                birthday = new Date(userData.birthday).toLocaleDateString();
                            } catch (e) {
                                birthday = userData.birthday;
                            }
                        }
                        
                        var createTime = '';
                        if (userData.createTime) {
                            try {
                                createTime = new Date(userData.createTime).toLocaleString();
                            } catch (e) {
                                createTime = userData.createTime;
                            }
                        }
                        
                        var content = '<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">' +
                            '<ul class="layui-tab-title">' +
                            '  <li class="layui-this">基本信息</li>' +
                            '  <li>黑名单记录</li>' +
                            '</ul>' +
                            '<div class="layui-tab-content">' +
                            '  <div class="layui-tab-item layui-show">' +
                            '    <table class="layui-table">' +
                            '      <tr><td style="width: 100px;">用户ID:</td><td>' + (userData.id || '') + '</td></tr>' +
                            '      <tr><td>用户名:</td><td>' + (userData.username || '') + '</td></tr>' +
                            '      <tr><td>昵称:</td><td>' + (userData.nickname || '') + '</td></tr>' +
                            '      <tr><td>手机号:</td><td>' + (userData.phone || '') + '</td></tr>' +
                            '      <tr><td>邮箱:</td><td>' + (userData.email || '') + '</td></tr>' +
                            '      <tr><td>性别:</td><td>' + sexText + '</td></tr>' +
                            '      <tr><td>生日:</td><td>' + birthday + '</td></tr>' +
                            '      <tr><td>注册时间:</td><td>' + createTime + '</td></tr>' +
                            '      <tr><td>状态:</td><td>' + statusText + '</td></tr>' +
                            '    </table>' +
                            '  </div>' +
                            '  <div class="layui-tab-item">' +
                            '    <div id="blacklistRecords" style="padding: 10px;">' +
                            '      <p style="text-align: center;">加载中...</p>' +
                            '    </div>' +
                            '  </div>' +
                            '</div>' +
                            '</div>';
                            
                        layer.open({
                            type: 1,
                            title: '用户详情 - ' + (userData.username || ''),
                            content: content,
                            area: ['600px', '500px'],  // 调整弹出层大小以适应更多内容
                            success: function(layero, index) {
                                layui.use('element', function() {
                                    var element = layui.element;
                                    element.render('tab');
                                });
                                
                                // 加载黑名单记录
                                loadBlacklistRecords(userId);
                            }
                        });
                    } else {
                        layer.msg(res.msg || '获取用户信息失败');
                    }
                },
                error: function() {
                    layer.msg('请求失败');
                }
            });
        }
        
        // 加载用户黑名单记录
        function loadBlacklistRecords(userId) {
            $.ajax({
                url: '/blacklist/list',
                method: 'GET',
                data: {
                    page: 1,
                    limit: 10,
                    username: '' // 通过用户名查询，但这里我们用userId
                },
                success: function(res) {
                    if (res.code === 200) {
                        var records = res.data || [];
                        var filteredRecords = records.filter(function(record) {
                            return record.userId === userId;
                        });
                        
                        var recordsHtml = '';
                        if (filteredRecords.length > 0) {
                            recordsHtml += '<table class="layui-table">' +
                                '<thead>' +
                                '<tr>' +
                                '  <th>拉黑原因</th>' +
                                '  <th>拉黑时间</th>' +
                                '  <th>操作人</th>' +
                                '</tr>' +
                                '</thead>' +
                                '<tbody>';
                                
                            filteredRecords.forEach(function(record) {
                                recordsHtml += '<tr>' +
                                    '<td>' + (record.reason || '') + '</td>' +
                                    '<td>' + (record.createTime ? new Date(record.createTime).toLocaleString() : '') + '</td>' +
                                    '<td>' + (record.operator || '') + '</td>' +
                                    '</tr>';
                            });
                            
                            recordsHtml += '</tbody></table>';
                        } else {
                            recordsHtml = '<p style="text-align: center; color: #999;">暂无黑名单记录</p>';
                        }
                        
                        $('#blacklistRecords').html(recordsHtml);
                    } else {
                        $('#blacklistRecords').html('<p style="text-align: center; color: red;">加载黑名单记录失败: ' + (res.msg || '') + '</p>');
                    }
                },
                error: function() {
                    $('#blacklistRecords').html('<p style="text-align: center; color: red;">请求失败</p>');
                }
            });
        }
    });
</script>

<!-- 操作栏自定义模板 -->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>移除
        </button>
    </div>
</script>

</body>
</html>